<script setup lang="ts">
import Echarts from "@/components/echartsTemplate/index.vue";
import { fetchGetCollegeList } from "@/api/public";
import { onMounted, reactive } from "vue";
const xData = reactive([])
const yData = reactive([])
onMounted(() => {
  getCollegeData()
})
// 获取学院数据
const getCollegeData = async () => {
  const res = await fetchGetCollegeList()
  res.data.data.forEach(item => {
    xData.push(item.name)
    yData.push(item.presidentNumber)
  })
}

const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: "shadow"
    }
  },

  grid: {
    left: '5%',
    top: '6%',
    bottom: '12%',
    right: '5%'
  },
  xAxis: {
    data: xData,
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 129, 109, 0.1)',
        width: 1 //这里是为了突出显示加上的
      }
    },
    axisLabel: {
      textStyle: {
        color: '#999',
        fontSize: 12
      }
    }
  },
  yAxis: [{
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 129, 109, 0.1)',
        width: 1 //这里是为了突出显示加上的
      }
    },
    axisLabel: {
      show: false,

    },
    splitArea: {
      areaStyle: {
        color: 'rgba(215,216,140)'
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(215,216,140, 0.1)',
        width: 0.5,
        type: 'dashed'
      }
    }
  }],
  series: [{
    name: '干部人数',
    type: 'pictorialBar',
    barCategoryGap: '0%',
    barWidth: '50%',
    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
    label: {
      show: true,
      position: 'top',
      distance: 15,
      color: '#D7E091',
      fontWeight: 'bolder',
      fontSize: 12,
    },
    itemStyle: {
      normal: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#43E7C6' //  0%  处的颜色
          },
          {
            offset: 1,
            color: '#2DB4E8' //  100%  处的颜色
          }
          ],
          global: false //  缺省为  false
        }
      },
      emphasis: {
        opacity: 1
      }
    },
    data: yData,
    z: 10
  }]
});
</script>

<template>
  <div class="ringDiagram">
    <Echarts :option="option"></Echarts>
  </div>
</template>

<style scoped lang="scss">
.ringDiagram {
  height: 100%;
}
</style>
